import { PageHeader, Row, Col, Card, List, Avatar } from 'antd';
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import _ from 'lodash'
function News() {
    const [list, setlist] = useState([])
    useEffect(() => {
        axios.get("/news?publishState=2&expand=category").then(res => {
            setlist(Object.entries(_.groupBy(res.data, item => item.categoryId)))
        })
    }, [])
    return (
        <div style={{ width: "94%", margin: "0 auto" }}>
            <PageHeader
                title="全球大新闻"
                subTitle=""
            >
            </PageHeader>
            <Row gutter={[16, 16]}>
                {
                    list.map(item => {
                       return  <Col key={item[0]} span={8}>
                            <Card hoverable={true} title={item[0]} bordered={true}>
                                <List
                                    size='small'
                                    dataSource={item[1]}
                                    renderItem={item => <List.Item><a href={`#/detail/${item.id}`}>{item.title}</a></List.Item>}
                                    pagination={{
                                        pageSize: 3
                                    }}
                                />
                            </Card>
                        </Col>
                    })
                }

            </Row>
        </div>
    )
}

export default News
